<style lang="less">

</style>

<template>
  <div >
    <el-form :model="queryForm.condition" label-width="114px" :rules="rules" ref="addform" label-suffix="：">
      <el-row :getter="10">
        <el-col :span="12">
          <el-form-item :label="$t('mainbase.expertType')" prop="fromSys">
            <el-select :disabled="dataProp === '编辑'"  v-model="queryForm.condition.fromSys" @change="changeExpert" style="width: 100%">
                <el-option label="校内专家" :value="0"> </el-option>
                <el-option label="校外专家" :value="1"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        
      </el-row>
      <el-row :getter="10">
        <el-col :span="12" v-if="queryForm.condition.fromSys===0">
          <el-form-item :label="$t('mainbase.nameWork')" prop="name">
            
            <el-autocomplete class="inline-input" style="width: 100%"
              v-model="queryForm.condition.name" :fetch-suggestions="querySearch" :trigger-on-focus="false"
              @select="handleSelect" @input="handleChange">
            </el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col v-else :span="12">
          <el-form-item :label="$t('mainbase.name')" prop="name">
            <!-- <CalendarSelect  v-model="queryForm.calendarId" ></CalendarSelect> -->
            <!-- <el-form-item :label="$t('internship.TrainingLevel')"> -->
              <el-input :disabled="queryForm.condition.fromSys===0" v-model="queryForm.condition.name" maxlength="16"></el-input>
            <!-- </el-form-item> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('mainbase.gender')">
            <DictSelect :disabled="queryForm.condition.fromSys===0" v-model="queryForm.condition.sex" filterable :data="options.sex" :plzSelect="true"></DictSelect>
            <!-- <el-select :disabled="queryForm.condition.fromSys===0"  v-model="queryForm.condition.sex" clearable style="width: 100%">
                <el-option
                    v-for="item in TrainingLevel"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :getter="10">
        <el-col :span="12">
          <el-form-item :label="$t('mainbase.age')">
            <el-input :disabled="queryForm.condition.fromSys===0" v-model.number="queryForm.condition.age" @change="changeAge" maxlength="3"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('mainbase.affiliatedUnit')" prop="department">
            <el-input :disabled="queryForm.condition.fromSys===0" v-model="queryForm.condition.department" maxlength="64"></el-input>
            <!-- <el-autocomplete
            :disabled="queryForm.condition.fromSys===0"
              class="inline-input"
              style="width:100%"
              v-model="queryForm.condition.department"
              :fetch-suggestions="querySearchList"
              :placeholder="$t('internship.pleaseEnter')"
              :trigger-on-focus="false"
              @select="handleSelectList"
            ></el-autocomplete> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :getter="10">
        <el-col :span="12">
          <el-form-item :label="$t('mainbase.titleTechnical')">
            <DictSelect :disabled="queryForm.condition.fromSys===0" v-model="queryForm.condition.proTitle" @change="changeTitle" filterable :data="options.title" :plzSelect="true"></DictSelect>
            <!-- <el-select :disabled="queryForm.condition.fromSys===0"  v-model="queryForm.condition.proTitle" clearable style="width: 100%">
              <el-option
                  v-for="item in formsLearn"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('mainbase.status')" prop="isEnabled">
            <el-select  v-model="queryForm.condition.isEnabled" style="width: 100%">
                <el-option label="启用" :value="1"> </el-option>
                <el-option label="停用" :value="0"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :getter="10">
        <el-col :span="12">
          <el-form-item :label="$t('mainbase.phone')" label-width="118px" prop="contactPhone">
            <el-input  v-model="queryForm.condition.contactPhone" maxlength="11"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('mainbase.contactEail')" label-width="118px">
            <el-input  @change="changeEmail" v-model="queryForm.condition.contactEmail" maxlength="100"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :getter="10" v-if="dataList!=='导师'">
        <el-col >
          <el-form-item :label="$t('mainbase.mailAddress')" prop="linkAddress">
            <el-input  v-model="queryForm.condition.linkAddress"  maxlength="256"></el-input>
          </el-form-item>
        </el-col>
        
      </el-row>
      <el-row :getter="10">
        <!-- v-if='dataList==="导师"' -->
        <el-col >
          <el-form-item :label="$t('mainbase.introduc')" prop="introduction">
            <!-- @change="changeRntroduc" -->
            <el-input type="textarea"  :rows="5" v-model="queryForm.condition.introduction" maxlength="256"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col v-else>
          <el-form-item :label="$t('mainbase.introduc')" prop="curriculum">
            <el-input type="textarea" :rows="5" v-model="queryForm.curriculum"></el-input>
          </el-form-item>
        </el-col> -->
      </el-row>
      
      <el-row :getter="10" v-if="queryForm.condition.fromSys!==0">
        <el-col :span="12">
          <el-form-item :label="$t('mainbase.account')" prop="account">
            <el-input v-model="queryForm.condition.account" maxlength="32"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('mainbase.initial')" prop="password">
            <el-input v-model="queryForm.condition.password" maxlength="32"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      
    </el-form>
    <el-dialog
      width="25%"
      ref="innerDialog"
      :title="$t('graduateBase.prompt')"
      :visible.sync="innerVisible"
      append-to-body
      :top="'28vh'">
      <div style="text-align: left;margin-bottom: 25px;">{{$t('graduateBase.cancelTip')}}</div>
      <div style="text-align: right;">
        <el-button type="primary" @click="confirmInner">{{$t('common.btn.confirm')}}</el-button>
        <el-button @click="cancelInner">{{$t('common.btn.cancel')}}</el-button>
        <el-button type="primary" @click="confirmAndClose">{{$t('graduateBase.saveAndClose')}}</el-button>
      </div>
    </el-dialog>
    <el-row type="flex" class="row-bg" justify="end">
      <el-button @click="cancelDialog" >{{$t('graduate.cancel')}}</el-button>
      <el-button @click="reset" >{{$t('internship.reset')}}</el-button>
      <el-button type="danger"  @click="conserve">{{$t('graduate.conserve')}}</el-button>
      
    </el-row>

  </div>
</template>

<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent';
export default {
  
  props: {
    dataList: {
      type: String
    },
    dataProp: {
      type: String
    },
    dataListProp: {
      type: Object
    },
    dataQueryForm: {
      type: Object
    },
    showFlag: {
      type: Boolean
    },
    agent: {
      type: Boolean,
      default: false,
      required: false
    },
    admin: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    let cannotEnter = (rule, value, callback) => {
      let reg = /[`$]/im;
      if (reg.test(value)) {
        return callback(new Error(this.$t('identificationToDoList.cannotContain')));
      } else if (value === '') {
        return callback(new Error(this.$t('internship.pleaseEnter')));
      }
      return callback();
    };
    let cannotEnterName = (rule, value, callback) => {
      let reg = /[`$]/im;
      if (reg.test(value)) {
        return callback(new Error(this.$t('identificationToDoList.cannotContain')));
      } else
      return callback();
    };
    let validateNum = (rule, value, callback) => {
      // let reg = /^[0-9]*$/;
      let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(value) || value === '') {
        return callback(new Error(this.$t('mainbase.pleasePhone')));
      }
      return callback();
    };
    return {
      dataList: [],
      fileList: [],
      queryForm: {
        condition: {
          // nameEdt: '',
          name: '',
          sex: '',
          age: '',
          department: '',
          isEnabled: 1,
          proTitle: '',
          contactPhone: '',
          password: '',
          account: '',
          introduction: '',
          linkAddress: '',
          fromSys: '',
          contactEmail: ''
        }
      },
      innerVisible: false,
      id: '',
      restaurants: [],
      formsLearn: [],
      options: {
        facultys: [],
        timeList: [],
        title: [],
        sex: [],
        auditStatus: [
          {
            label: '待提交',
            value: 0
          },
          {
            label: '待审核',
            value: 1
          },
          {
            label: '审核通过',
            value: 2
          },
          {
            label: '驳回',
            value: 3
          },
          {
            label: '待录入',
            value: 4
          }
        ]
      },
      listName: '',
      pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.queryForm.effectEndDate;
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime();
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          let beginDateVal = this.queryForm.effectStartDate;
          if (beginDateVal) {
            return time.getTime() <= new Date(beginDateVal).getTime()- 86400000;
          }
        }
      },
      rules: {
        password: [
          {validator: cannotEnterName, trigger: 'blur' }
        ],
        account: [
          {validator: cannotEnterName, trigger: 'blur' }
          // { required: true, message: this.$t('internship.pleaseEnter'), trigger: 'change' }
        ],
        name: [
          { required: true, validator: cannotEnter, trigger: 'change' }
        ],
        department: [
          { required: true, validator: cannotEnter, trigger: 'blur' }
          // { required: true, message: this.$t('internship.pleaseEnter'), trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, validator: validateNum, trigger: 'blur' }
        ],
        isEnabled: [
          { required: true, message: this.$t('internship.pleaseSelect'), trigger: 'change' }
        ],
        fromSys: [
          { required: true, message: this.$t('internship.pleaseSelect'), trigger: 'change' }
        ],
        introduction: [
          { validator: this.checkSpecial, trigger: 'blur' }
        ],
        linkAddress: [
          { validator: this.checkSpecial, trigger: 'blur' }
        ]
      },
      
    };
  },
  watch: {
    showFlag: {
      handler: function(newV, oldV) {
        if (newV) {
          this.getSessionBase();
          if (this.dataProp === '编辑') {
            if (this.dataListProp) {
              let list = JSON.parse(JSON.stringify(this.dataListProp));
              this.queryForm.condition = list;
              if (this.queryForm.condition.fromSys === 0) {
                this.queryForm.condition.name = list.name + '(' + list.account + ')';
              }
            }
          } else if (this.dataProp === '新增') {
            this.dataListProp = {};
            this.listName = '';
            // this.queryForm.condition.sex = '';
            // this.queryForm.condition.age = '';
            // this.queryForm.condition.isEnabled = 1;
            // this.queryForm.condition.department = '';
            // this.queryForm.condition.name = '';
            // this.queryForm.condition.proTitle = '';
            // this.queryForm.condition.contactPhone = '';
            // this.queryForm.condition.contactEmail = '';
            // this.queryForm.condition.linkAddress = '';
            // this.queryForm.condition.password = '';
            // this.queryForm.condition.account = '';
            // this.queryForm.condition.introduction = '';
            // this.queryForm.condition.fromSys = '';
            this.$refs['addform'].resetFields();
            for (const key in this.queryForm.condition) {
              this.queryForm.condition[key] = "";
            }
            this.queryForm.condition.isEnabled = 1;
            // console.log(this.queryForm);
            
            // this.$refs['addform'].clearValidate();
          }
        }
      }
    }
  },
  mounted() {
    this.getOptions();
    
  },
  methods: {
    getSessionBase() {
      graduateStudent.getSession().then(res => {
        this.id = res.data.realUid;
      }).then(() => {
        this.getBaseListByBase(this.id);
      });
    },
    getBaseListByBase(id) {
      this.formsLearn = [];
      graduateStudent.getBaseListByBaseAccount(id).then(res => {
        if (res.data.length > 0) {

          res.data.forEach(el => {
            this.formsLearn.push({
              label: el.baseName,
              value: el.baseName
            }) 
          });
          // this.queryForm.condition.department = res.data[0].baseName;
        }
      });
    },
    handleSelectList() {},
    querySearchList(queryString, cb) {
      let restaurants = this.formsLearn;
      let results = queryString ? restaurants.filter(this.createFilterList(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilterList(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    // 过滤$符号
    checkSpecial(rule, value, callback) {
      let regEn = /[`$]/im;
      if (regEn.test(value)) {
        return callback(new Error(this.$t('identificationToDoList.cannotContain')))
      } else if (value === '') {
        return callback();
      } else {
        return callback();
      }
    },
    // 过滤$符号
    changeSymbol(val) {
      if (this.queryForm.condition.linkAddress.indexOf("$") >= 0) {
        this.queryForm.condition.linkAddress = '';
        return this.$message({
          type: "error",
          message: this.$t('identificationToDoList.cannotContain')
        });
      }
    },
    // 过滤$符号
    changeRntroduc(val) {
      if (this.queryForm.condition.introduction.indexOf("$") >= 0) {
        this.queryForm.condition.introduction = '';
        return this.$message({
          type: "error",
          message: this.$t('identificationToDoList.cannotContain')
        });
      }
    },
    getOptions() {
      // 筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ["profession", 'G_XBIE']
      };
      queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            title: "profession",
            sex:"G_XBIE"
          },
          res.data,
          this.options
        );
        // console.log(this.options);
        
      });
      // this.topTitle =
      //     this.tutorType == 1 ? "新生导师管理" : "学院导师管理";
      // this.message =
      //     this.tutorType == 1 ? "新生导师学生指定" : "学院导师学生指定";
      // this.searchList();
    },
    handleFindTeacher(data) {
      graduateStudent.findTeacherList(data).then(res => {
        this.restaurants = res.data.list;
        this.restaurants.map((value) => {
          value['value'] = value.name + '(' + value.code + ')';
        });
      });
    },
    // 输入网址
    changeEmail(val) {
      // console.log(val);
      let re = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (val) {
        if (re.test(val)) {
          return this.queryForm.condition.contactEmail = val;
          // return true;
        }else{
          this.$message(this.$t('mainbase.pleasEmail'));
          this.queryForm.condition.contactEmail = '';
        }
      }
    },
    // 职称转换
    changeTitle() {
      this.options.title.forEach(el => {
        if (el.value === this.queryForm.condition.proTitle) {
          this.queryForm.condition.proTitle = el.label;
        }
      });
    },
    // 输入年龄校验
    changeAge(val) {
      // console.log(val);
      let re = /^[1-9]*$/;
      if (val) {
        if (re.test(val)) {
          return this.queryForm.condition.age = val;
          // return true;
        }else{
          this.$message(this.$t('mainbase.pleaseNumber'));
          this.queryForm.condition.age = '';
        }
      }
    },
    // 回填信息
    handleSelect (val) {
      let list = JSON.parse(JSON.stringify(val));
      this.queryForm.condition.sex = list.sex;
      this.queryForm.condition.age = list.age;
      this.queryForm.condition.department = list.facultyI18n;
      this.queryForm.condition.proTitle = list.title;
      this.queryForm.condition.contactPhone = list.phone;
      this.queryForm.condition.contactEmail = list.email;
      this.queryForm.condition.account = list.code;
      this.listName = list.name;
      // condition pageNum_: 0 pageSize_: 20
      // graduateStudent.findTeacherList()
    },
    // 根据姓名工号模糊查询
    handleChange(val) {
      let obj = {
        pageNum_: 0,
        pageSize_: 100
      };
      // obj.condition = val.target.value;
      obj.condition = val;
      this.handleFindTeacher(obj);
    },
    // 专家改变
    changeExpert(val) {
      if (this.queryForm.condition.fromSys === 0) {
        this.queryForm.condition.name = '';
        this.queryForm.condition.sex = '';
        this.queryForm.condition.age = '';
        this.queryForm.condition.department = '';
        this.queryForm.condition.proTitle = '';
        this.queryForm.condition.contactPhone = '';
        this.queryForm.condition.contactEmail = '';
       } else if (this.dataProp === '编辑') {
        this.queryForm.condition = JSON.parse(JSON.stringify(this.dataListProp));
        this.queryForm.fromSys = JSON.parse(JSON.stringify(this.dataListProp.fromSys));
      } else if (this.dataProp === '新增' && this.queryForm.condition.fromSys === 1) {
        this.queryForm.condition.name = '';
        this.queryForm.condition.sex = '';
        this.queryForm.condition.age = '';
        this.queryForm.condition.department = '';
        this.queryForm.condition.proTitle = '';
        this.queryForm.condition.contactPhone = '';
        this.queryForm.condition.contactEmail = '';
        // this.queryForm.condition = {}
      }
    },
    // 输入搜索
    querySearch(queryString, cb) {
      let restaurants = this.restaurants;
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      // clearTimeout(this.timeout);
      // this.timeout = setTimeout(() => {
      //   cb(results);
      // }, 3000 * Math.random());
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 || restaurant.code.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    // 内层弹出确定
    confirmInner() {
      this.dataListProp = {};
      // this.queryForm.condition = {};
      this.listName = '';
      // this.queryForm.condition.sex = '';
      // this.queryForm.condition.age = '';
      // this.queryForm.condition.isEnabled = 1;
      // this.queryForm.condition.department = '';
      // this.queryForm.condition.name = '';
      // this.queryForm.condition.proTitle = '';
      // this.queryForm.condition.contactPhone = '';
      // this.queryForm.condition.contactEmail = '';
      // this.queryForm.condition.linkAddress = '';
      // this.queryForm.condition.password = '';
      // this.queryForm.condition.account = '';
      // this.queryForm.condition.introduction = '';
      // this.queryForm.condition.fromSys = '';
      this.$refs['addform'].resetFields();
      for (let key in this.queryForm.condition) {
        this.queryForm.condition[key] = '';
      }
      this.queryForm.condition.isEnabled = 1;
      
      this.innerVisible = false;
      this.$emit("cancel-dialog", false);
    },
    // 内层弹出取消
    cancelInner() {
      this.innerVisible = false;
    },
    // 内层弹出保存关闭
    confirmAndClose() {
      this.innerVisible = false;
      this.conserve();
    },
    // 取消
    cancelDialog() {
      let isEmpty = true;
      for (let key in this.queryForm.condition) {
        if (this.queryForm.condition[key]) {
          isEmpty = false;
        }
      }
      if (isEmpty) {
        this.innerVisible = false;
        this.listName = '';
        this.dataListProp = {};
        this.$refs['addform'].resetFields();
        for (let key in this.queryForm.condition) {
          this.queryForm.condition[key] = '';
        }
        this.$emit("cancel-dialog", false);
      } else {
        this.innerVisible = true;
      }
     
    },
   
    // 重置
    reset() {
      if (this.dataProp === '编辑') {
        this.$refs['addform'].resetFields();
        for (let key in this.queryForm.condition) {
          this.queryForm.condition[key] = '';
        }
        // this.queryForm.condition.sex = '';
        // this.queryForm.condition.age = '';
        // this.queryForm.condition.department = '';
        // this.queryForm.condition.name = '';
        // this.queryForm.condition.proTitle = '';
        // this.queryForm.condition.contactPhone = '';
        // this.queryForm.condition.contactEmail = '';
        // this.queryForm.condition.linkAddress = '';
        // this.queryForm.condition.password = '';
        // this.queryForm.condition.account = '';
        // this.queryForm.condition.introduction = '';
        this.queryForm.condition.fromSys = this.dataListProp.fromSys;
        this.queryForm.condition.isEnabled = 1;
        this.queryForm.condition.id = this.dataListProp.id;
        // this.$refs['addform'].clearValidate();
      } else if (this.dataProp === '新增') {
        this.$refs['addform'].resetFields();
        this.dataListProp = {};
        for (let key in this.queryForm.condition) {
          this.queryForm.condition[key] = '';
        }
        this.queryForm.condition.isEnabled = 1;
        // this.$refs['addform'].clearValidate();
        
      }
    },
    // 保存
    conserve() {
      this.$refs['addform'].validate(valid => {
        if (valid) {
          if (this.dataList === "专家")  {
            this.queryForm.condition.category = 1;
            if (this.dataProp === '新增') {
              if (this.queryForm.condition.fromSys === 0) {
                this.queryForm.condition.name = this.listName;
              }
            } else {
              this.queryForm.condition.name = this.queryForm.condition.name.split('(')[0];
            }
            this.$emit("affirm-form", this.queryForm.condition, this.dataQueryForm); 
            // this.$refs['addform'].resetFields();
            // console.log(this.queryForm.condition, 'this.queryForm.condition');
          }
        }
      });
    },
    
    // 删除
    handleRemove() {},
    // 上传成功
    handleSuccess() {}
    
  },
  // async
  created() {
    this.getSessionBase();
    if (this.dataProp === '编辑') {
      if (this.dataListProp) {
        let list = JSON.parse(JSON.stringify(this.dataListProp));
        this.queryForm.condition = list;
        if (this.queryForm.condition.fromSys === 0) {
          this.queryForm.condition.name = list.name + '(' + list.account + ')';
        }
      }
    } else if (this.dataProp === '新增') {
        this.dataListProp = {};
        this.listName = '';
        // this.queryForm.condition.sex = '';
        // this.queryForm.condition.age = '';
        // this.queryForm.condition.department = '';
        // this.queryForm.condition.name = '';
        // this.queryForm.condition.proTitle = '';
        
        // this.queryForm.condition.contactPhone = '';
        // this.queryForm.condition.contactEmail = '';
        // this.queryForm.condition.linkAddress = '';
        // this.queryForm.condition.password = '';
        // this.queryForm.condition.account = '';
        // this.queryForm.condition.introduction = '';
        // this.queryForm.condition.fromSys = '';
        for (const key in this.queryForm.condition) {
          this.queryForm.condition[key] = "";
        }
        this.queryForm.condition.isEnabled = 1;
        // this.$refs['addform'].clearValidate();
        // this.$refs['addform'].resetFields();
    }
  }
};
</script>
